<template>
	<div>
		<el-form :inline="true" :model="listParams" class="demo-form-inline">
			<el-form-item label="学员状态">
				<el-select placeholder="请选择" v-model="listParams.status" size="small">
					<el-option label="启用" value="shanghai"></el-option>
					<el-option label="禁用" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="学生名称">
				<el-input size="small" v-model="listParams.nickname" placeholder="请输入学生关键字"></el-input>
			</el-form-item>
			<el-form-item label="手机号">
				<el-input size="small" v-model="listParams.mobile" placeholder="请输入手机号"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="small" icon="el-icon-search" @click="this.getUserList">搜索</el-button>
				<el-button size="small" icon="el-icon-refresh">重置</el-button>
			</el-form-item>
		</el-form>

		<el-form :inline="true" class="demo-form-inline">
			<el-form-item>
				<el-button size="small" type="primary" @click="$router.push('/add')">新增学员</el-button>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="$router.push('/import')">批量导入</el-button>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary">批量导出</el-button>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="$router.push('/report')">查看报表</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="userList" border style="width: 100%">
			<el-table-column type="selection">
			</el-table-column>
			<el-table-column prop="nickname" label="学生名称" align="center">
				<template slot-scope="scope">
					<div class="user">
						<img :src="scope.row.avatar" />
						<span>{{scope.row.nickname}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="mobile" label="手机号" align="center">
			</el-table-column>
			<el-table-column prop="status" label="状态" align="center">
				<template slot-scope="scope">
					<span v-show="scope.row.status==1">启用</span>
					<span v-show="scope.row.status==0">禁用</span>
				</template>
			</el-table-column>
			<el-table-column prop="created_at" label="创建时间" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.created_at|formatDate}}</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="290px" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="$router.push(`/details/${scope.row.uid}`)">详情
					</el-button>
					<el-button type="text" size="small" @click="$router.push(`/edit/${scope.row.uid}`)">编辑</el-button>
					<el-button type="text" size="small">禁用</el-button>
					<el-button type="text" size="small">删除</el-button>
					<el-button type="text" size="small">重置密码</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="this.listParams.page" :page-sizes="[5,10,12,16]" :page-size="this.listParams.limit"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: [],
		// 局部注册的组件
		components: {},
		// 组件状态值
		data() {
			return {
				// 列表参数
				listParams: {
					page: 1,
					limit: 5,
					status: 0,
					nickname: "",
					mobile: "",
				},
				total: 0,
				userList: [],
				value: "",
			}
		},
		mounted() {},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {
			// 获取学生列表
			async getUserList() {
				const {
					data: res
				} = await this.$http.get("user", this.listParams);
				this.userList = res.data.list;
				this.total = res.data.total;
			},
			handleSizeChange(size) {
				this.listParams.limit = size;
				this.getUserList()
			},
			handleCurrentChange(page) {
				this.listParams.page = page;
				this.getUserList()
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {
			this.getUserList()
		},
	}
</script>

<style lang="scss" scoped>
	.user {
		display: flex;
		align-items: center;

		img {
			width: 45px;
			height: 45px;
			border-radius: 50%;
			margin-right: 10px;
		}
	}
</style>
